import React, { Component } from 'react'
import ReactDom from 'react-dom'
import hljs from 'highlight.js/lib/highlight'
import javascript from 'highlight.js/lib/languages/javascript'
import 'highlight.js/styles/github.css'
hljs.registerLanguage('javascript', javascript)

const testStr = `
function abc () {
  // test
  return 2
}
const json = {
  age: 18,
  name: '张十三',
  child: [
    {
      age: 16,
      name: '张三三',
      child: [
        {
          age: 16,
          name: '丽丽'
        }
      ]
    }
  ]
}
`

class App extends Component {

  render () {
    const res = hljs.highlight('javascript', testStr)
    console.log(res.value)
    var patt1 = new RegExp('\\n')
    var result = patt1.test(res.value)
    console.log(result)
    let arr = res.value.split('\n')
    console.log(arr)
    return <ul>
      {
        arr.map((item, index) => {
          const text = item.replace(/^\s{1,}/, (a, b, c) => {
            const res = a.replace(/\s/g, '&nbsp')
            return res
          })
          console.log(item)
          console.log(text)
          return <li dangerouslySetInnerHTML = {{ __html: text }} key={index}></li>
        })
      }
    </ul>
    // let li = document.createElement('li')
    // li.innerHTML = 'a    <span>123</span>'
    // console.log(li)
    // return React.createElement('div', null, 'a    <span>123</span>')
  }
}

// 本地开发测试数据
ReactDom.render(
  <App/>,
  document.getElementById('root')
)